<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Sticky Footer Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .btn {
  margin: 1rem 1rem 1rem 0;
    width: 29%;
        display: inline-table;
}
.btn .yin{
        font-size: 26px;
        font-weight: 700;
            float: left;
}
.btn .word{
    color: #6b6868;
        float: right;
}
    </style>
</head>

<body>

    <!-- Begin page content -->
    <div class="container">
        <div class="page-header">
            <h1>拼音学习</h1>
        </div>
        <div>

            <div>

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#dushengmu" aria-controls="dushengmu" role="tab"
                            data-toggle="tab">声母表</a></li>
                    <li role="presentation"><a href="#duyunmu" aria-controls="duyunmu" role="tab" data-toggle="tab">韵母表</a></li>
                    <li role="presentation"><a href="#duyinjie" aria-controls="duyinjie" role="tab" data-toggle="tab">整体认读音节</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="dushengmu">
                        <button class="btn btn-success dushm dushengmu" mp3="b.mp3"><span class="yin">b </span><span
                                class="word">
                                玻</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="p.mp3"><span class="yin">p </span><span
                                class="word">
                                坡</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="m.mp3"><span class="yin">m </span><span
                                class="word">
                                摸</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="f.mp3"><span class="yin">f </span><span
                                class="word">
                                佛</span></button>

                        <button class="btn btn-success dushm dushengmu" mp3="d.mp3"><span class="yin">d </span><span
                                class="word">
                                得</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="t.mp3"><span class="yin">t </span><span
                                class="word">
                                特</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="n.mp3"><span class="yin">n </span><span
                                class="word">
                                讷</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="l.mp3"><span class="yin">l </span><span
                                class="word">
                                勒</span></button>


                        <button class="btn btn-success dushm dushengmu" mp3="g.mp3"><span class="yin">g </span><span
                                class="word">
                                歌</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="k.mp3"><span class="yin">k </span><span
                                class="word">
                                科</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="h.mp3"><span class="yin">h </span><span
                                class="word">
                                喝</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="j.mp3"><span class="yin">j </span><span
                                class="word">
                                基</span></button>


                        <button class="btn btn-success dushm dushengmu" mp3="q.mp3"><span class="yin">q </span><span
                                class="word">
                                欺</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="x.mp3"><span class="yin">x </span><span
                                class="word">
                                希</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="zh.mp3"><span class="yin">zh </span><span
                                class="word"> 知</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="ch.mp3"><span class="yin">ch </span><span
                                class="word"> 蚩</span></button>


                        <button class="btn btn-success dushm dushengmu" mp3="sh.mp3"><span class="yin">sh </span><span
                                class="word"> 思</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="r.mp3"><span class="yin">r </span><span
                                class="word">
                                日</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="z.mp3"><span class="yin">z </span><span
                                class="word">
                                资</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="c.mp3"><span class="yin">c </span><span
                                class="word">
                                雌</span></button>


                        <button class="btn btn-success dushm dushengmu" mp3="s.mp3"><span class="yin">s </span><span
                                class="word">
                                思</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="y.mp3"><span class="yin">y </span><span
                                class="word">
                                衣</span></button>
                        <button class="btn btn-success dushm dushengmu" mp3="w.mp3"><span class="yin">w </span><span
                                class="word">
                                乌</span></button>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="duyunmu">
                        <button class="btn btn-success duym duyunmu" mp3="a.mp3"><span class="yin">ɑ </span><span class="word">
                                啊</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="o.mp3"><span class="yin">o </span><span class="word">
                                喔</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="e.mp3"><span class="yin">e </span><span class="word">
                                鹅</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="i.mp3"><span class="yin">i </span><span class="word">
                                衣</span></button>

                        <button class="btn btn-success duym duyunmu" mp3="u.mp3"><span class="yin">u </span><span class="word">
                                乌</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="v.mp3"><span class="yin">ü </span><span class="word">
                                迂</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="ai.mp3"><span class="yin">ai </span><span
                                class="word">
                                哀</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="ei.mp3"><span class="yin">ei </span><span
                                class="word">
                                诶</span></button>

                        <button class="btn btn-success duym duyunmu" mp3="ui.mp3"><span class="yin">ui </span><span
                                class="word">
                                威</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="ao.mp3"><span class="yin">ao </span><span
                                class="word">
                                熬</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="ou.mp3"><span class="yin">ou </span><span
                                class="word">
                                欧</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="iu.mp3"><span class="yin">iu </span><span
                                class="word">
                                优</span></button>


                        <button class="btn btn-success duym duyunmu" mp3="ie.mp3"><span class="yin">ie </span><span
                                class="word">
                                耶</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="ve.mp3"><span class="yin">üe </span><span
                                class="word">
                                约</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="er.mp3"><span class="yin">er </span><span
                                class="word">
                                耳</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="an.mp3"><span class="yin">ɑn </span><span
                                class="word">
                                安</span></button>

                        <button class="btn btn-success duym duyunmu" mp3="en.mp3"><span class="yin">en </span><span
                                class="word">
                                恩</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="in.mp3"><span class="yin">in </span><span
                                class="word">
                                因</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="un.mp3"><span class="yin">un </span><span
                                class="word">
                                温</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="vn.mp3"><span class="yin">ün </span><span
                                class="word">
                                晕</span></button>

                        <button class="btn btn-success duym duyunmu" mp3="ang.mp3"><span class="yin">ɑng </span><span
                                class="word">
                                昂</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="eng.mp3"><span class="yin">eng </span><span
                                class="word">
                                享</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="ing.mp3"><span class="yin">ing </span><span
                                class="word">
                                英</span></button>
                        <button class="btn btn-success duym duyunmu" mp3="ong.mp3"><span class="yin">ong </span><span
                                class="word">
                                翁</span></button>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="duyinjie">

                        <button class="btn btn-success" mp3="zhi1.mp3"><span class="yin">zhi</span><span class="word">织</span></button>
                        <button class="btn btn-success" mp3="chi1.mp3"><span class="yin">chi</span><span class="word">
                                吃</span></button>
                        <button class="btn btn-success" mp3="shi1.mp3"><span class="yin">shi</span><span class="word">
                                狮</span></button>

                        <button class="btn btn-success" mp3="ri1.mp3"><span class="yin">ri </span><span class="word"> 日</span></button>
                        <button class="btn btn-success" mp3="zi1.mp3"><span class="yin">zi</span><span class="word"> 资</span></button>
                        <button class="btn btn-success" mp3="ci1.mp3"><span class="yin">ci </span><span class="word"> 刺</span></button>

                        <button class="btn btn-success" mp3="si1.mp3"><span class="yin">si </span><span class="word"> 丝</span></button>
                        <button class="btn btn-success" mp3="yi1.mp3"><span class="yin">yi </span><span class="word"> 衣</span></button>
                        <button class="btn btn-success" mp3="wu1.mp3"><span class="yin">wu </span><span class="word"> 屋</span></button>

                        <button class="btn btn-success" mp3="yu1.mp3"><span class="yin">yu </span><span class="word"> 雨</span></button>
                        <button class="btn btn-success" mp3="ye1.mp3"><span class="yin">ye </span><span class="word"> 椰</span></button>
                        <button class="btn btn-success" mp3="yue1.mp3"><span class="yin">yue </span><span class="word">
                                月</span></button>

                        <button class="btn btn-success" mp3="yuan1.mp3"><span class="yin">yuɑn </span><span class="word">
                                圆</span></button>
                        <button class="btn btn-success" mp3="yin1.mp3"><span class="yin">yin</span><span class="word">
                                印</span></button>
                        <button class="btn btn-success" mp3="yun1.mp3"><span class="yin">yun </span><span class="word">
                                云</span></button>

                        <button class="btn btn-success" mp3="ying1.mp3"><span class="yin">ying</span><span class="word">
                                鹰</span></button>
                    </div>
                </div>



            </div>

        </div>
    </div>


    <audio id="player">
        你的浏览器不支持html5音频播放，请换用支持html5音频的浏览器
    </audio>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var player = $("#player")[0];
        var burl = 'http://du.hanyupinyin.cn/du/pinyin/';
        var mp3 = document.createElement('source');
        mp3.type = 'audio/mpeg';
        $("#player").append(mp3);

        $(function () {
            $(".btn[mp3]").on("touchend click", function () {
                mp3.src = burl + $(this).attr('mp3');
                player.load();
                player.play();
            });

        });
    </script>
</body>

</html>